import React, { Component } from 'react';
import styles from './index.less';

export default class ElectricAlarm extends Component {
  componentDidMount() {}
  render() {
    const data = [
      {
        id: 1,
        name: '今日精选',
        number: 50,
      },
      {
        id: 2,
        name: '今日消警',
        number: 50,
      },
      {
        id: 3,
        name: '今日消警率',
        number: '50%',
      },
      {
        id: 4,
        name: '最高次数(次)',
        number: '3000',
      },
      {
        id: 5,
        name: '累计消警(次)',
        number: '2000',
      },
      {
        id: 6,
        name: '累计消警率',
        number: '80%',
      },
    ];
    return (
      <div className={styles.root}>
        {data.map((item, index) => {
          console.log('index', index);
          return (
            <div
              className={
                index === 0 ? `${styles.box} ${styles.active}` : styles.box
              }
              key={item.id}
            >
              <p className={styles.title}>{item.name}</p>
              <p className={styles.number}>{item.number}</p>
            </div>
          );
        })}
      </div>
    );
  }
}
